<template>
  <div>
    <sunSearch :search="searchList" />
    <el-card class="sun-el-card">
      <sunUpdataAdd :title="this.$route.meta.title" />
      <el-table v-loading="listLoading" :header-cell-style="{color:'#000000'}" :data="list" border fit highlight-current-row>
        <el-table-column label="名称" prop="name" />
        <el-table-column align="center" label="创建时间" prop="created_at" width="200" />
        <el-table-column align="center" label="更新时间" prop="updated_at" width="200" />
        <el-table-column align="center" fixed="right" label="操作" width="200">
          <template slot-scope="scope">
            <el-button type="danger" size="small" @click="removeData(scope.row.id)">
              删除
            </el-button>
            <el-button type="primary" size="small" @click="addData(scope.row)">
              编辑
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <pagination v-show="laypage.total>0" :total="laypage.total" :page.sync="laypage.number" :limit.sync="laypage.size" @pagination="requestData" />
    </el-card>
    <el-dialog
      width="70%"
      class="sun-el-dialog sun-title-el-dialog"
      title="角色权限"
      :destroy-on-close="true"
      :lock-scroll="true"
      :close-on-click-modal="false"
      :show-close="false"
      :visible.sync="show_rolePermission"
    >
      <rolePermission v-if="show_rolePermission" ref="mychild" />
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="show_rolePermission = false">取 消</el-button>
        <el-button type="primary" size="small" @click="onFinish">完 成</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { $tooltips } from '@/sun-components/SunMsg.js'
import { get, put, post } from '@/api/request'
import { $remove } from '@/sun-components/SunMsg.js'
import Pagination from '@/sun-components/Pagination'
import SunSearch from '@/sun-components/SunSearch'
import SunUpdataAdd from '@/sun-components/SunUpdataAdd'
import RolePermission from './components/rolePermission'
export default {
  name: 'Roles',
  components: { Pagination, SunSearch, SunUpdataAdd, RolePermission },
  data() {
    return {
      searchList: [
        { 'id': 'ID', type: 'input', show: 'id', value: '' },
        { 'name': '名称', type: 'input', show: 'name', value: '' }
      ],
      searchFilter: {},
      show_rolePermission: false,
      list: null,
      listLoading: true,
      laypage: {
        number: 1,
        size: 10,
        total: 0
      },
      roleList: [],
      defaultCheckedKeys: [],
      formData: {}
    }
  },
  created() {
    this.upData()
    this.getPermissionsList()
  },
  methods: {
    upData() {
      this.requestData()
    },
    async searchResult(filter) {
      this.searchFilter = filter
      this.upData()
    },
    async requestData() {
      this.listLoading = true
      await get(`roles`, Object.assign(this.searchFilter, { 'page[size]': this.laypage.size, 'page[number]': this.laypage.number })).then(response => {
        if (response.code === 0) {
          this.list = response.data
          this.laypage.total = response.meta.total
        }
        this.listLoading = false
      })
    },
    async getPermissionsList() {
      await get(`permissions`).then(response => {
        if (response.code === 0) {
          this.roleList = response.data
        }
      })
    },
    addData(row) {
      this.$set(this, 'formData', {})
      this.$set(this.formData, 'guard_name', 'admin')
      this.$set(this.formData, 'name', '')
      this.$set(this.formData, 'permissions', [])
      this.$set(this, 'defaultCheckedKeys', [])
      if (row) {
        this.$set(this.formData, 'id', row.id)
        this.$set(this.formData, 'name', row.name)
        row.permissions.forEach(item => {
          this.defaultCheckedKeys.push(item.id)
        })
      }
      this.show_rolePermission = true
    },
    async onFinish() {
      const _that = this
      const refForm = _that.$refs.mychild.getRefForm()
      if (!_that.formData.permissions.length) {
        $tooltips('请选择权限!', 'error')
        return
      }
      refForm.validate(valid => {
        if (!valid) return
        const id = _that.formData.id ? _that.formData.id : false
        if (id) {
          put(`roles/${id}`, _that.formData).then(response => {
            if (response.code === 0) {
              _that.show_rolePermission = false
              _that.upData()
            }
          })
        } else {
          post(`roles`, _that.formData).then(response => {
            if (response.code === 0) {
              _that.show_rolePermission = false
              _that.upData()
            }
          })
        }
      })
    },
    async removeData(id) {
      $remove(`roles/${id}`, this)
    }
  }
}
</script>
<style lang="scss" scoped>
  @import '@/styles/sun-style.scss';
</style>
